<template>
    <view style="height: 100%">
        <!-- 新建活动 -->
        <view class="add-page">
            <image class="topImg" src="/static/resource/p1-top.png"></image>
            <form @submit="submitForm">
                <view class="weui-toptips weui-toptips_warn" v-if="showTopTips">{{ TopTips }}</view>
                <view class="mod-a">
                    <!-- 活动主题 -->
                    <view class="mod t-name">
                        <text class="key">活动名称</text>
                        <input name="title" class="input" maxlength="100" placeholder="请输入活动名称" :value="titleClone" />
                        <image class="arrow-r" src="/static/images/arrow-r-0.png"></image>
                    </view>
                </view>

                <view class="mod-a mt20">
                    <!-- 活动类别 -->
                    <view class="mod t-sign-time">
                        <text class="key">活动类别</text>
                        <picker @change="bindTypeChange" :value="typeIndex" :range="types">
                            <view class="value" name="types">
                                {{ types[typeIndex] }}
                                <image class="arrow-r" src="/static/images/arrow-r-0.png"></image>
                            </view>
                        </picker>
                    </view>

                    <!-- 活动地点 -->
                    <view class="mod t-address" @tap="chooseLocation">
                        <text class="key">活动地点</text>
                        <text name="address" class="value" @tap="addressChange" :value="address">{{ address }}</text>
                        <image class="arrow-r" src="/static/images/arrow-r-0.png"></image>
                    </view>

                    <!-- 有效时间 -->
                    <view class="mod t-sign-time">
                        <text class="key">有效时间</text>
                        <picker mode="date" :value="date" :start="date" end="2020-09-01" @change="bindDateChange">
                            <view class="value" name="endtime">
                                {{ date }}
                                <image class="arrow-r" src="/static/images/arrow-r-0.png"></image>
                            </view>
                        </picker>
                    </view>

                    <!-- 限制人数 -->
                    <view class="mod t-early">
                        <text class="key">限制人数</text>
                        <switch type="switch" @change="switch1Change" name="switchHide" />
                    </view>

                    <!-- 人数设置 -->
                    <view v-if="peopleHide">
                        <view class="mod t-name">
                            <text class="key">人数设置</text>
                            <input name="peoplenum" type="number" class="input" maxlength="100" placeholder="请输入人数" :value="peoplenum" />
                            <image class="arrow-r" src="/static/images/arrow-r-0.png"></image>
                        </view>
                    </view>
                </view>

                <!-- 活动内容 -->
                <view class="mod-a mt20">
                    <view class="mod-big my-nick">
                        <textarea
                            name="content"
                            class="weui-textarea"
                            placeholder="请输入活动内容"
                            :value="content"
                            style="height: 7em"
                            @input="bindTextAreaChange"
                            :maxlength="noteMaxLen"
                        />
                        <view class="chnumber">{{ noteNowLen }}/{{ noteMaxLen }}</view>
                    </view>
                </view>
                <view class="add_pic" @tap="uploadPic" v-if="!isSrc">
                    <view>添加图片（选）</view>
                </view>
                <view v-if="isSrc" class="image_box">
                    <view class="picPre">
                        <image :src="src" mode="aspectFit"></image>
                        <view @tap="clearPic"></view>
                    </view>
                </view>
                <view class="mod-a mt20"></view>
                <view class="mod-a mt20" v-if="showInput">
                    <!-- 真实姓名 -->
                    <view class="mod t-name">
                        <text class="key">真实姓名</text>
                        <input name="realname" class="input" maxlength="100" placeholder="请输入真实姓名" :value="realname" />
                        <image class="arrow-r" src="/static/images/arrow-r-0.png"></image>
                    </view>
                    <view class="mod-a"></view>
                    <view class="mod t-name">
                        <picker name="contactWay" @change="bindAccountChange" :value="accountIndex" :range="accounts">
                            <view class="select">{{ accounts[accountIndex] }}</view>
                        </picker>
                        <input name="contactValue" class="input" placeholder="请输入号码" :value="contactValue" />
                        <image class="arrow-r" src="/static/images/arrow-r-0.png"></image>
                    </view>
                    <view class="add_pic t-code" @tap="uploadCodePic" v-if="!isCodeSrc">
                        <view class="code">上传活动群二维码（选）</view>
                    </view>
                    <view v-if="isCodeSrc" class="image_box">
                        <view class="picPre">
                            <image :src="codeSrc" mode="aspectFit"></image>
                            <view @tap="clearCodePic"></view>
                        </view>
                    </view>
                </view>

                <view class="mod-a mt20">
                    <checkbox-group @change="bindAgreeChange">
                        <label class="weui-agree" for="weuiAgree">
                            <view class="weui-agree__text">
                                <checkbox class="weui-agree__checkbox" id="weuiAgree" value="agree" :checked="isAgree" />
                                <view class="weui-agree__checkbox-icon">
                                    <icon class="weui-agree__checkbox-icon-check" type="success_no_circle" size="9" v-if="isAgree"></icon>
                                </view>
                                阅读并同意
                                <view @tap="showNotice" class="weui-agree__link">《发起须知》</view>
                            </view>
                        </label>
                    </checkbox-group>
                    <view class="submit-btn">
                        <button class="button" :loading="isLoading" hover-start-time="200" :disabled="isdisabled" formType="submit">发起</button>
                    </view>
                </view>
            </form>
        </view>

        <view class="notice" id="notice" v-if="notice_status" @tap="tapNotice">
            <view class="box">
                <view class="box-hd">
                    <text class="box-title">发起须知</text>
                    <image class="box-close" src="/static/images/more/close.png" @tap="hideNotice"></image>
                </view>
                <view class="box-bd">
                    <view class="notice-q">1、为什么需要填写真实姓名与联系方式等信息？</view>
                    <view class="notice-a">
                        <text>线上报名，线下联系；填写真实有效的联系信息更加有利于活动的开展</text>
                        <text>联系方式有三种选择，分别是微信号，QQ号以及手机号，这三种联系方式在目前生活中是最为普遍的</text>
                        <text>当有用户报名您的发起时，即可查看您填写的联系信息，以便加入者与您联系,没有加入的用户无法查看您的联系信息</text>
                        <text>活动的群二维码主要用于活动的交流与联系,可以视活动的大小上传或者不上传</text>
                    </view>
                    <view class="notice-q">2、发起内容的有哪些限制？</view>
                    <view class="notice-a">
                        <text>发起内容应该在法律允许的范围内，如果发起内容违反了相关的法律法规，一经发现，本软件有权限对该发起进行删除操作</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
//获取应用实例
var app = getApp();
var Bmob = require('../../utils/bmob.js');
var common = require('../template/getCode.js');
var that;
var myDate = new Date();
//格式化日期
function formate_data(myDate) {
    let month_add = myDate.getMonth() + 1;
    var formate_result = myDate.getFullYear() + '-' + month_add + '-' + myDate.getDate();
    return formate_result;
}
export default {
    data() {
        return {
            notice_status: false,
            accounts: ['微信号', 'QQ号', '手机号'],
            accountIndex: 0,
            peopleHide: false,
            isAgree: false,
            date: formate_data(myDate),
            address: '点击选择位置',
            longitude: 0,

            //经度
            latitude: 0,

            //纬度
            showTopTips: false,

            TopTips: '',
            noteMaxLen: 200,

            //备注最多字数
            content: '',

            noteNowLen: 0,

            //备注当前字数
            types: ['运动', '游戏', '交友', '旅行', '读书', '竞赛', '电影', '音乐', '其他'],

            typeIndex: '0',

            //显示输入真实姓名,
            showInput: false,

            titleClone: '',
            peoplenum: 0,
            isSrc: '',
            src: '',
            realname: '',
            contactValue: '',
            isCodeSrc: '',
            codeSrc: '',
            isLoading: false,
            isdisabled: false
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        that = this;
        that.setData({
            //初始化数据
            src: '',
            isSrc: false,
            ishide: '0',
            autoFocus: true,
            isLoading: false,
            loading: true,
            isdisabled: false
        });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {
        uni.hideToast();
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        var myInterval = setInterval(getReturn, 500); ////半秒定时查询
        function getReturn() {
            uni.getStorage({
                key: 'user_openid',
                success: function (ress) {
                    if (ress.data) {
                        clearInterval(myInterval);
                        that.setData({
                            loading: true
                        });
                    }
                }
            });
        }
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        tapNotice: function (e) {
            if (e.target.id == 'notice') {
                this.hideNotice();
            }
        },

        showNotice: function (e) {
            this.setData({
                notice_status: true
            });
        },

        hideNotice: function (e) {
            this.setData({
                notice_status: false
            });
        },

        //字数改变触发事件
        bindTextAreaChange: function (e) {
            var that = this;
            var value = e.detail.value;
            var len = parseInt(value.length);
            if (len > that.noteMaxLen) {
                return;
            }
            that.setData({
                content: value,
                noteNowLen: len
            });
        },

        //上传活动图片
        uploadPic: function () {
            //选择图标
            uni.chooseImage({
                count: 1,
                // 默认9
                sizeType: ['compressed'],
                //压缩图
                sourceType: ['album', 'camera'],
                // 可以指定来源是相册还是相机，默认二者都有
                success: function (res) {
                    // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
                    var tempFilePaths = res.tempFilePaths;
                    that.setData({
                        isSrc: true,
                        src: tempFilePaths
                    });
                }
            });
        },

        //删除图片
        clearPic: function () {
            //删除图片
            that.setData({
                isSrc: false,
                src: ''
            });
        },

        //上传活动群二维码
        uploadCodePic: function () {
            //选择图标
            uni.chooseImage({
                count: 1,
                // 默认9
                sizeType: ['compressed'],
                //压缩图
                sourceType: ['album', 'camera'],
                // 可以指定来源是相册还是相机，默认二者都有
                success: function (res) {
                    // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
                    var tempFilePaths = res.tempFilePaths;
                    that.setData({
                        isCodeSrc: true,
                        codeSrc: tempFilePaths
                    });
                }
            });
        },

        //删除活动群二维码
        clearCodePic: function () {
            that.setData({
                isCodeSrc: false,
                codeSrc: ''
            });
        },

        //限制人数
        switch1Change: function (e) {
            if (e.detail.value == false) {
                this.setData({
                    peopleHide: false
                });
            } else if (e.detail.value == true) {
                this.setData({
                    peopleHide: true
                });
            }
        },

        //改变时间
        bindDateChange: function (e) {
            this.setData({
                date: e.detail.value
            });
        },

        //改变活动类别
        bindTypeChange: function (e) {
            this.setData({
                typeIndex: e.detail.value
            });
        },

        //选择地点
        addressChange: function (e) {
            this.addressChoose(e);
        },

        addressChoose: function (e) {
            var that = this;
            uni.chooseLocation({
                success: function (res) {
                    that.setData({
                        address: res.name,
                        longitude: res.longitude,
                        //经度
                        latitude: res.latitude //纬度
                    });

                    if (e.detail && e.detail.value) {
                        this.address = e.detail.value;
                    }
                },
                fail: function (e) {},
                complete: function (e) {}
            });
        },

        //改变联系方式
        bindAccountChange: function (e) {
            this.setData({
                accountIndex: e.detail.value
            });
        },

        //同意相关条例
        bindAgreeChange: function (e) {
            this.setData({
                isAgree: !!e.detail.value.length,
                showInput: !this.showInput
            });
        },

        //表单验证
        showTopTips: function () {
            var that = this;
            this.setData({
                showTopTips: true
            });
            setTimeout(function () {
                that.setData({
                    showTopTips: false
                });
            }, 3000);
        },

        //提交表单
        submitForm: function (e) {
            var that = this;
            if (that.showInput == false) {
                uni.showModal({
                    title: '提示',
                    content: '请先阅读《发起须知》'
                });
                return;
            }
            var title = e.detail.value.title;
            var endtime = this.date;
            var typeIndex = this.typeIndex;
            var acttype = 1 + parseInt(typeIndex);
            var acttypename = getTypeName(acttype); //获得类型名称
            var address = this.address;
            var longitude = this.longitude; //经度
            var latitude = this.latitude; //纬度
            var switchHide = e.detail.value.switchHide;
            var peoplenum = e.detail.value.peoplenum;
            console.log(peoplenum);
            var content = e.detail.value.content;
            //------发布者真实信息------
            var realname = e.detail.value.realname;
            var contactindex = this.accountIndex;
            if (contactindex == 0) {
                var contactWay = '微信号';
            } else if (contactindex == 1) {
                var contactWay = 'QQ号';
            } else if (contactindex == 2) {
                var contactWay = '手机号';
            }
            var contactValue = e.detail.value.contactValue;
            var wxReg = new RegExp('^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$');
            var qqReg = new RegExp('[1-9][0-9]{4,}');
            var phReg = /^1[34578]\d{9}$/;
            var nameReg = new RegExp('^[\u4E00-\u9FA5]{2,4}$');
            //先进行表单非空验证
            if (title == '') {
                this.setData({
                    showTopTips: true,
                    TopTips: '请输入主题'
                });
            } else if (address == '点击选择位置') {
                this.setData({
                    showTopTips: true,
                    TopTips: '请选择地点'
                });
            } else if (switchHide == true && peoplenum == '') {
                this.setData({
                    showTopTips: true,
                    TopTips: '请输入人数'
                });
            } else if (content == '') {
                this.setData({
                    showTopTips: true,
                    TopTips: '请输入活动内容'
                });
            } else if (realname == '') {
                this.setData({
                    showTopTips: true,
                    TopTips: '请输入真实姓名'
                });
            } else if (realname != '' && !nameReg.test(realname)) {
                this.setData({
                    showTopTips: true,
                    TopTips: '真实姓名一般为2-4位汉字'
                });
            } else if (contactValue == '') {
                this.setData({
                    showTopTips: true,
                    TopTips: '请输入联系方式'
                });
            } else if (contactWay == '微信号' && !wxReg.test(contactValue)) {
                this.setData({
                    showTopTips: true,
                    TopTips: '微信号格式不正确'
                });
            } else if (contactWay == '手机号' && !phReg.test(contactValue)) {
                this.setData({
                    showTopTips: true,
                    TopTips: '手机号格式不正确'
                });
            } else if (contactWay == 'QQ号' && !qqReg.test(contactValue)) {
                this.setData({
                    showTopTips: true,
                    TopTips: 'QQ号格式不正确'
                });
            } else {
                console.log('校验完毕');
                that.setData({
                    isLoading: true,
                    isdisabled: true
                });
                //向 Events 表中新增一条数据
                uni.getStorage({
                    key: 'user_id',
                    success: function (ress) {
                        var Diary = Bmob.Object.extend('Events');
                        var diary = new Diary();
                        var me = new Bmob.User();
                        me.id = ress.data;
                        diary.set('title', title);
                        diary.set('endtime', endtime);
                        diary.set('acttype', acttype + '');
                        diary.set('isShow', 1);
                        diary.set('address', address);
                        diary.set('longitude', longitude); //经度
                        diary.set('latitude', latitude); //纬度\
                        if (that.peopleHide) {
                            //如果设置了人数
                            diary.set('peoplenum', peoplenum);
                        } else if (!that.peopleHide) {
                            diary.set('peoplenum', '-1');
                        }
                        diary.set('content', content);
                        diary.set('publisher', me);
                        diary.set('likenum', 0);
                        diary.set('commentnum', 0);
                        diary.set('liker', []);
                        diary.set('joinnumber', 0); //发布后初始加入人数为0
                        diary.set('joinArray', []);
                        if (that.isSrc == true) {
                            var name = that.src; //上传图片的别名
                            var file = new Bmob.File(name, that.src);
                            file.save();
                            diary.set('actpic', file);
                        }
                        //新增操作
                        diary.save(null, {
                            success: function (result) {
                                //活动扩展表中添加一条记录
                                var Diary = Bmob.Object.extend('EventMore');
                                var query = new Diary();
                                var Events = Bmob.Object.extend('Events');
                                var event = new Events();
                                event.id = result.id;
                                query.set('Status', 0);
                                query.set('Statusname', '准备中');
                                query.set('event', event);
                                //如果上传了群二维码
                                if (that.isCodeSrc == true) {
                                    var name = that.codeSrc; //上传图片的别名
                                    var file = new Bmob.File(name, that.codeSrc);
                                    file.save();
                                    query.set('qrcode', file);
                                }
                                query.save();

                                //再将发布者的信息添加到联系表中
                                uni.getStorage({
                                    key: 'user_id',
                                    success: function (ress) {
                                        var Contacts = Bmob.Object.extend('Contacts');
                                        var contact = new Contacts();
                                        var Events = Bmob.Object.extend('Events');
                                        var event = new Events();
                                        event.id = result.id;
                                        var me = new Bmob.User();
                                        me.id = ress.data;
                                        contact.set('publisher', me); //发布人是自己
                                        contact.set('currentUser', me); //参加的人也是自己
                                        contact.set('event', event);
                                        contact.set('realname', realname);
                                        contact.set('contactWay', contactWay);
                                        contact.set('contactValue', contactValue);
                                        contact.save();
                                    }
                                });
                                console.log('发布成功,objectId:' + result.id);
                                that.setData({
                                    isLoading: false,
                                    isdisabled: false,
                                    eventId: result.id
                                });
                                //添加成功，返回成功之后的objectId(注意，返回的属性名字是id,而不是objectId)
                                common.dataLoading('发起成功', 'success', function () {
                                    //重置表单
                                    that.setData({
                                        title: '',
                                        typeIndex: 0,
                                        address: '点击选择位置',
                                        longitude: 0,
                                        //经度
                                        latitude: 0,
                                        //纬度
                                        data: formate_data(myDate),
                                        isHide: true,
                                        peoplenum: 0,
                                        peopleHide: false,
                                        isAgree: false,
                                        accountIndex: 0,
                                        realname: '',
                                        content: '',
                                        contactValue: '',
                                        noteNowLen: 0,
                                        showInput: false,
                                        src: '',
                                        isSrc: false,
                                        codeSrc: '',
                                        isCodeSrc: false
                                    });
                                });
                            },
                            error: function (result, error) {
                                //添加失败
                                console.log('发布失败=' + error);
                                common.dataLoading('发起失败', 'loading');
                                that.setData({
                                    isLoading: false,
                                    isdisabled: false
                                });
                            }
                        });
                    }
                });
            }
            setTimeout(function () {
                that.setData({
                    showTopTips: false
                });
            }, 1000);
        }
    }
};

//根据活动类型获取活动类型名称
function getTypeName(acttype) {
    var acttypeName = '';
    if (acttype == 1) acttypeName = '运动';
    else if (acttype == 2) acttypeName = '游戏';
    else if (acttype == 3) acttypeName = '交友';
    else if (acttype == 4) acttypeName = '旅行';
    else if (acttype == 5) acttypeName = '读书';
    else if (acttype == 6) acttypeName = '竞赛';
    else if (acttype == 7) acttypeName = '电影';
    else if (acttype == 8) acttypeName = '音乐';
    else if (acttype == 9) {
        acttypeName = '其他';
    }
    return acttypeName;
}
</script>
<style>
@import '../../style/weui.css';
@import '../../style/zanui.css';
.select {
    padding-right: 20px;
    height: 2.58823529em;
    min-height: 2.58823529em;
    line-height: 2.58823529em;
    color: #118fff;
}
.line-css {
    height: 1px;
    background: #b2b2b2;
    margin: 0 10rpx;
}
.addressdetail {
    margin-top: 0.77em;
    padding-left: 15px;
    padding-right: 15px;
    color: #999;
    font-size: 14px;
}
.button {
    width: 400rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    font-size: 16px;
    border: 0 none;
    background: #118fff;
    color: #fff;
    margin: 30rpx auto;
    border-radius: 50px;
}

.add_pic {
    padding: 0 40rpx;
    background: #fff;
}

.add_pic view {
    display: inline-block;
    margin-top: 20rpx;
    width: 430rpx;
    height: 200rpx;
    line-height: 200rpx;
    text-align: center;
    background: url('http://bmob-cdn-14867.b0.upaiyun.com/2017/11/23/e93d28a14095af18801d3c1c68e08fe7.png') no-repeat left center;
    background-size: 160rpx auto;
    padding-left: 80rpx;
    color: #b2b2b2;
}
.add_pic .code {
    display: inline-block;
    margin-top: 20rpx;
    width: 430rpx;
    height: 200rpx;
    line-height: 200rpx;
    text-align: center;
    background: url('http://bmob-cdn-14867.b0.upaiyun.com/2017/11/23/e93d28a14095af18801d3c1c68e08fe7.png') no-repeat left center;
    background-size: 160rpx auto;
    padding-left: 130rpx;
    color: #b2b2b2;
}

.image_box {
    width: 100%;
    background: #fff;
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    padding: 10px 0 10rpx;
}

.picPre {
    width: 50%;
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
}

.picPre image {
    width: 100%;
    height: 180rpx;
}

.picPre view {
    position: absolute;
    right: 0px;
    top: -20rpx;
    width: 15px;
    height: 15px;
    background: url('http://bmob-cdn-14867.b0.upaiyun.com/2017/11/23/b93323e440f4c3998034dbb9011a1e1d.png') no-repeat;
    background-size: cover;
}

.hidden {
    display: none;
}

/*最新样式*/
.mt20 {
    margin-top: 20rpx;
}

.add-page {
    display: flex;
    flex-direction: column;
    font-size: 32rpx;
    color: #676767;
    padding: 30rpx 0;
}

.mod-a {
    padding: 0 20rpx;
    border: 1px solid #f0f0f0;
    background-color: #fff;
}

.mod {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 90rpx;
    padding: 0 20rpx;
}

.mod-big {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 250rpx;
    padding: 0 20rpx;
    position: relative;
}
.chnumber {
    position: absolute;
    right: 0;
    bottom: 0;
    color: #b2b2b2;
    text-align: right;
}

.arrow-r {
    width: 9rpx;
    height: 17rpx;
    margin-left: 10rpx;
}
.arrow-d {
    width: 17rpx;
    height: 9rpx;
    margin-left: 10rpx;
}

.value {
    color: #b2b2b2;
}
.t-sign-time .value {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.t-early .value {
    padding-right: 20rpx;
}
.t-name .input,
.t-address .value {
    text-align: right;
    width: 510rpx;
    overflow: hidden;
    color: #b2b2b2;
    height: 44rpx;
}

.t-address,
.t-sign-time,
.t-time {
    border-bottom: 1px solid #f0f0f0;
}
.t-code {
    border-top: 1px solid #f0f0f0;
}

.t-time {
    justify-content: space-around;
}
.start,
.end {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.pipe {
    height: 48rpx;
    border-left: 1px solid #f0f0f0;
}
.date {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 10rpx;
    color: #2fcc85;
}
.week {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}
.week .d {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 48rpx;
    height: 48rpx;
    border-radius: 50%;
    background-color: #b2b2b2;
    text-align: center;
    color: #fff;
    margin: 0 15rpx;
}
.week .on {
    background-color: #2fcc85;
}
.create {
    margin-top: 80rpx;
    padding: 0 26rpx;
}
.create .btn {
    height: 80rpx;
    line-height: 80rpx;
    background-color: #2fcc85;
    color: #fff;
}
.create .button-hover {
    background-color: #2caf6d;
    color: #aadfc4;
}

.create .disabled {
    opacity: 0.4;
}

.submit-btn {
    background: #fff;
    overflow: hidden;
}
.login-notice {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 30rpx;
    font-size: 10pt;
    color: #bbb;
}
.login-notice-img {
    width: 11pt;
    height: 11pt;
    margin: 0 5rpx;
}
.confirm-btn {
    font-size: 13pt;
    line-height: 85rpx;
    height: 85rpx;
    background: #7acfa6;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    margin: 50rpx 3%;
}
.confirm-btn:active {
    opacity: 0.8;
}
.notice {
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 80%;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 50px rgba(22, 22, 22, 0.35);
    transform: translate3d(0, 0, 0);
}
.box-hd {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100rpx;
    border-bottom: 1px solid #eee;
}
.box-title {
    font-size: 13pt;
}
.box-close {
    position: absolute;
    right: 20rpx;
    width: 35rpx;
    height: 35rpx;
    padding: 15rpx;
}
.box-bd {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 15rpx 40rpx 30rpx;
}
.notice-q {
    color: #999;
    font-size: 11pt;
    line-height: 200%;
    margin-top: 5rpx;
}
.notice-a {
    text-indent: 1em;
    line-height: 160%;
    display: flex;
    flex-direction: column;
}
.notice-a text {
    word-break: break-all;
}
.topImg {
    width: 704rpx;
    height: 182rpx;
    margin-left: 21rpx;
    position: relative;
    margin-top: 50rpx;
}
</style>
